﻿<template>
  <a-collapse activeKey="1" expand-icon-position="right">
    <a-collapse-panel key="1" header="查询条件">
      <a-form-model
        :model="params"
        ref="paramsForm"
        :labelCol="{ md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } }"
        :wrapperCol="{ md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } }"
      >
        <a-row>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="用户标识">
              <a-input
                v-model.trim="params.openId"
                placeholder="请输入用户标识"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="来源平台">
              <a-select
                style="width: 100%"
                v-model="params.sysPlatformUuid"
                placeholder="请选择来源平台"
              >
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in sysPlatforms"
                  :key="item.uUid"
                  :value="item.uUid"
                  >{{ item.nickName }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="时间段">
              <a-range-picker
                style="width: 100%"
                valueFormat="YYYY-MM-DD"
                v-model="params.time"
              />
            </a-form-model-item>
          </a-col>

          <a-col
            :xs="24"
            :sm="24"
            :md="6"
            :lg="6"
            :xl="6"
            :xxl="6"
            style="text-align: right"
          >
            <a-form-model-item>
              <a-button
                icon="search"
                type="primary"
                :loading="loading"
                @click="handleRefresh"
                >查询</a-button
              >
              <a-divider type="vertical" />
              <a-button icon="reload" @click="handleReset">重置</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { getSysPlatformList } from "@/views/sysPlatform/sysPlatform";
export default {
  props: {
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {
      // 要查询的参数
      params: {
        time: null,
        openId: null,
        sysPlatformUuid: null,
      },
      sysPlatforms: [],
    };
  },
  created() {
    getSysPlatformList().then((res) => {
      this.sysPlatforms = res.data;
    });
  },
  methods: {
    //#region 查询数据
    handleRefresh() {
      this.$emit("handleRefresh");
    },
    //#endregion

    //#region 重置
    handleReset() {
      this.params.time = "";
      this.params.openId = "";
      this.params.sysPlatformUuid = "";
    },
    //#endregion
  },
};
</script>
